<template>
  <div class="order-list-container">
    <el-breadcrumb separator="/">
      <el-breadcrumb-item >营销活动</el-breadcrumb-item>
      <el-breadcrumb-item>分享奖金比例配置</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="easy-content">
      <el-form>
        <el-form-item class="easy-table">
          <el-table :data="activityList"
            style="width: 100%"
            min-height="150">
            <el-table-column prop="typeName"
              label="活动名称"
              min-width="150">
            </el-table-column>
            <el-table-column prop="alterTime"
              label="修改时间"
              min-width="150">
            </el-table-column>
            <el-table-column prop="operatorName"
              label="修改人"
              min-width="100">
            </el-table-column>
            <el-table-column prop="stateCN"
              label="活动状态"
              min-width="100">
            </el-table-column>
            <el-table-column fixed="right"
              label="操作"
              width="300">
              <template slot-scope="scope">
                <el-button type="text"
                  size="small"
                  @click="config(scope.row.id)">配置</el-button>
                <el-button type="text"
                  size="small"
                  @click="handle(scope.row.id,scope.row.state)">{{scope.row.state == 1? '禁用':'启动'}}</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-form-item>
      </el-form>

    </div>
  </div>
</template>
<script>
import { getActivityList, updateActivityState } from "@/public/js/active";
export default {
  components: {},
  data() {
    return {
      activityList: []
    };
  },
  created() {
    this._getActivityList();
  },
  mounted() {},
  methods: {
    //获取 活动列表数据
    _getActivityList() {
      getActivityList().then(res => {
        console.log(res);
        this.activityList = res.data.activeList;
      });
    },
    handle(id, state) {
      let str = state == 1 ? "禁用" : "开启";
      this.$confirm(`此操作将${str}该活动, 是否继续?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        let _state = state == 1 ? 2 : 1;
        updateActivityState({
          id: id,
          state: _state
        }).then(res => {
          if (!res.data.errCode) {
            this.$message({
              type: "success",
              message: "操作成功!"
            });
            this._getActivityList()
          }
        });
      });
    },
    config(id) {
      this.$router.push({
        path: "activity_config?id=" + id
      });
    }
  }
};
</script>
<style lang="scss" scoped>
</style>
